iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 3
1
Modern Web

使用 webpack 模組化你的程式碼,讓人生更美好。系列 第 3

<03 - 啟動原始碼> 使用 webpack-dev-server 及 webpack watch mode 來啟動吧!!

  • 分享至 

  • xImage
  •  

前兩天,我們分別介紹了

其實已經建好了一個非常簡單的頁面,即 index.html 檔,但要如何開啟它呢?


你可以直接將它點兩下直接用瀏覽器開啟,但顯然這不是個好方法,我們需要 web server 來啟動原始碼。幸好, webpack 有 webpack-dev-server 可以使用,讓我們可以快速啟動原始碼,有網址可以使用。

該來動手做囉/images/emoticon/emoticon31.gif

安裝 webpack-dev-server

進入到專案資料夾底下:

$ cd ~/path/to/webpack_proj

再執行以下指令即可安裝完成:

$ npm install webpack-dev-server --save-dev

啟動原始碼

在專案資料夾下,執行以下指令,就會產生 http://localhost:8080 的網址,直接指向到專案資料夾:

$ webpack-dev-server --open

執行完後會直接自動開啟瀏覽器,如下圖所示:
http://localhost:8080/webpack-dev-server/

眼尖的看倌們,應該會發現網址好像有點不太一樣,會出現 http://localhost:8080/webpack-dev-server/,那跟 http://localhost:8080 有什麼差異嗎?

其實你直接改成 http://localhost:8080 即可,就會是一般的正常頁面。

http://localhost:8080/webpack-dev-server/ 其實是 inline mode,也就是真正的內容是用 iframe 來載入的,然而也有提供其它功能,例:如果你有修改檔案並儲存的時候,頁面會自動 refresh(live reloading),有錯誤的話,也會有提示訊息,算是一種除錯模式吧。其實我們可以再進一步看一下頁面產生後的原始碼,僅列出 <body> 內的部份:

<body>
  <div class="header">
    <span id="okness"></span>
    <span id="status">App ready.</span>
  </div>
  <pre id="errors" style="display: none;"></pre>
  <div id="warnings"></div>
  <iframe id="iframe" src="http://localhost:8080/" allowfullscreen="" style="display: block;"></iframe>
</body>

會發現其實它就是透過 iframe 載入 http://localhost:8080/ 頁面的內容,而其它地方,會有額外的資訊提供,也算是滿方便的。

所以總結一下,webpack-dev-server 提供了兩個很重要的功能

  • 提供 web server:讓我們有 http://localhost:8080http://localhost:8080/webpack-dev-server/ 可使用。
  • inline mode 支援 live reloading:也就是在瀏覽 http://localhost:8080/webpack-dev-server/ 網址時,只要檔案有修改,頁面會自動重新整理。

webpack watch mode

透過 webpack-dev-server,我們有了 web server,也有了 live reloading,但這時要留意一下,live reloading 並不會將你修改的 app/index.js 重新 bundle 的,也就是原模組的內容並不會改變。

所以我們需要另開一個 terminal,執行以下指令,來偵測只要檔案有修改,就要重新 bundle,也就是所謂的 webpack watch mode

$ webpack --watch
Webpack is watching the files…

Hash: 05325635ef224df84ca2
Version: webpack 2.1.0-beta.27
Time: 408ms
    Asset    Size  Chunks             Chunk Names
bundle.js  543 kB       0  [emitted]  main
   [3] ./app/index.js 265 bytes {0} [built]
    + 3 hidden modules

所以結合 webpack watch modewebpack-dev-server,我們就可以真正的啟動原始碼了!/images/emoticon/emoticon64.gif

接下來的幾天,將會介紹在 webpack 中,很重要的 4 個基礎觀念,分別是 EntryOutputLoadersPlugins,敬請期待。/images/emoticon/emoticon41.gif


上一篇
<02 - 立竿見影> 使用 webpack 快速模組化,初探 config
下一篇
<04 - 心法1 - 根源> Entry
系列文
使用 webpack 模組化你的程式碼,讓人生更美好。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言